const path = require('path');
const merge = require('webpack-merge');
const common = require('./webpack.common');
const webpack = require('webpack');

let devConfig = {
  mode: 'development',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  // devServer: {
  //   contentBase: path.join(__dirname, 'dist'),
  //   port: 8000, // 本地服务器端口号
  //   hot: true, // 热重载
  //   overlay: true, // 如果代码出错，会在浏览器页面弹出“浮动层”。类似于 vue-cli 等脚手架
  //   proxy: {
  //     // 跨域代理转发
  //     '/comments': {
  //       target: 'https://m.weibo.cn',
  //       changeOrigin: true,
  //       logLevel: 'debug',
  //       headers: {
  //         Cookie: ''
  //       }
  //     }
  //   },
  //   historyApiFallback: {
  //     // HTML5 history模式
  //     rewrites: [{ from: /.*/, to: '/index.html' }]
  //   }
  // },
  module: {
    rules: [
      {
        test: /\.(sc|c|sa)ss$/,
        use: [
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-loader',
            options: {
              sourceMap: true
            }
          },
          {
            loader: 'postcss-loader',
            options: {
              ident: 'postcss',
              sourceMap: true,
              plugins: (loader) => [require('autoprefixer')({ browsers: ['> 0.15% in CN'] })]
            }
          },
          {
            loader: 'sass-loader', // 将 Sass 编译成 CSS
            options: {
              sourceMap: true
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin()
  ]
};
module.exports = merge(common, devConfig);
